<!-- 我的收益 -->
<template>
    <div class="profit_page">
        <div class="profitBox flex_btn">
            <div class="all_money_sty flex_cen_cen">
                <div><span style="font-size: 24px;font-weight:700;color: #000;margin-right: 10px;">{{
                    mineInCome.surplusEarningsAmount }}</span>元</div>
                <div style="margin: 12px 0;">累计收益{{ mineInCome.totalEarningsAmount }}元</div>
                <div class="flex_btn">
                    <div class="exchange_btn_sty" @click="isisShow = true">兑换户币</div>
                    <div class="withdrawal_btn_sty" @click="tiXianFun">提现</div>
                </div>
            </div>
            <div class="profit_detail_sty">
                <div class="detail_tit_sty">收益情况</div>
                <div class="flex_ard">
                    <div class="profit_item_sty">
                        <div>+{{ mineInCome.yesterdayEarningsAmount }}</div>
                        <div class="progit_name_sty">昨日收益</div>
                    </div>
                    <div class="profit_item_sty">
                        <div>+{{ mineInCome.weekEarningsAmount }}</div>
                        <div class="progit_name_sty">本周收益</div>
                    </div>
                    <div class="profit_item_sty">
                        <div>+{{ mineInCome.monthEarningsAmount }}</div>
                        <div class="progit_name_sty">本月收益</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="profit_main_box">
            <div class="profit_tab_box flex_str">
                <div class="tab_item_sty" v-for="(item, _index) in tabList" :key="item.id" @click="tabClick(item.id)"
                    :style="tabId == item.id ? 'border-bottom: 3px solid #E53236;' : ''">
                    {{ item.name }}</div>
                <div>
                    <el-config-provider :locale="locale">
                        <el-date-picker v-model="pickTime" type="daterange" range-separator="--" start-placeholder="开始时间"
                            end-placeholder="结束时间" @change="pickSel" />
                    </el-config-provider>
                </div>
            </div>
            <div v-show="tabId == 1">
                <el-table :data="tableData" border class="tabSty">
                    <el-table-column prop="createTime" label="收益时间" width="300" />
                    <el-table-column prop="incomeAmount" label="收益金额" width="180" />
                    <el-table-column prop="communityName" label="户型名称" width="200" />
                    <el-table-column prop="houseFileTypeName" label="户型文件类型" width="200" />
                    <el-table-column prop="nt" label="备注信息" />
                </el-table>
                <div class="flex_cen" style="width: 100%;margin-top: 50px;">
                    <el-config-provider :locale="locale">
                        <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
                            :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getIncomeInfn"
                            @current-change="getIncomeInfn" />
                    </el-config-provider>

                </div>
            </div>
            <div v-show="tabId == 2">
                <el-table :data="tixianData" border class="tabSty">
                    <el-table-column prop="orderNo" label="提现单号" width="300" />
                    <el-table-column prop="withdrawAmount" label="提现金额" width="180" />
                    <el-table-column prop="statusName" label="状态" width="160" />
                    <el-table-column prop="createTime" label="提现时间" width="240" />
                    <el-table-column prop="nt" label="备注信息" />
                </el-table>
                <div class="flex_cen" style="width: 100%;margin-top: 50px;">
                    <el-config-provider :locale="locale">
                        <el-pagination v-model:current-page="tixianParams.current" v-model:page-size="tixianParams.size"
                            :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="tixianTotal"
                            @size-change="getTiXianInfoFun" @current-change="getTiXianInfoFun" />
                    </el-config-provider>

                </div>

            </div>
            <div v-show="tabId == 3">
                <el-table :data="duiHuanData" border class="tabSty">
                    <el-table-column prop="orderNo" label="兑换单号" width="300" />
                    <el-table-column prop="withdrawAmount" label="兑换金额" width="180" />
                    <el-table-column prop="statusName" label="状态" width="160" />
                    <el-table-column prop="createTime" label="兑换时间" width="240" />
                    <el-table-column prop="nt" label="备注信息" />
                </el-table>
                <div class="flex_cen" style="width: 100%;margin-top: 50px;">
                    <el-config-provider :locale="locale">
                        <el-pagination v-model:current-page="duiHuanParams.current" v-model:page-size="duiHuanParams.size"
                            :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="duiHuanTotal"
                            @size-change="getDuiHuanInfoFun" @current-change="getDuiHuanInfoFun" />
                    </el-config-provider>

                </div>
            </div>
        </div>
    </div>
    <div class="bg" v-if="isShow">
        <div class="qrcodeSty2">
            <div class="diaTitSty2">提现</div>
            <div>提现金额</div>
            <el-input placeholder="请输入提现金额(单次提现额最少200元)" style="margin: 10px 0;" v-model="tixianMoney"></el-input>
            <div class="shengyuSty">剩余可提现金额 {{ shengyuMoney }} <span style="color:#E53236;"
                    @click="quanbuTiXian()">全部提现</span></div>
            <div class="codeFooterSty">
                <div class="footerBtn" @click="isShow = false">取消</div>
                <div class="addSty" @click="tiXianBtn()">确定</div>
            </div>
            <div><br></div>
            <span style="color:#E53236;">
                温馨提示：提现成功后，在2-3个工作日内，后台工作人员会通过您个人资料内的手机号/微信号联系您。 (务必保证个人资料填写正确)
            </span>
        </div>
    </div>
    <div class="bg" v-if="isisShow">
        <div class="qrcodeSty">
            <div class="diaTitSty">兑换户币</div>
            <el-input placeholder="请输入兑换数量(个)" style="margin: 10px 0;" v-model="duiHuanNum"></el-input>
            <div class="shengyuSty">当前收益可兑换户币 {{ shengyuMoney }} <span style="color:#E53236;"
                    @click="quanbuDuiHuan()">全部兑换</span></div>
            <div class="codeFooterSty">
                <div class="footerBtn" @click="isisShow = false">取消</div>
                <div class="addSty" @click="duiHuanFun()">确定</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getIncomeInfoApi, getMineInComeApi, getShengYuMoneyApi, tiXianBuBiApi, getTiXianInfoApi, duiHuanBuBiApi, getDuiHuanInfoApi } from '@/api/index/index';
import { formatDayTime } from '@/utils/moment'
import { ElMessage } from 'element-plus';
const locale = zhCn
// 时间段
const pickTime = ref('')

const tabList = ref([
    {
        id: 1,
        name: '收益明细'
    }, {
        id: 2,
        name: '提现明细'
    }, {
        id: 3,
        name: '兑换明细'
    }, {
        id: 4,
        name: '悬赏明细'
    }
])
const tabId = ref(1)
const total = ref(0)
const tixianMoney = ref<number | null>(null)
const tableData = ref<any>([
    {
        id: 0,
        createTime: '2020-23-23',
        incomeAmount: 40,
        communityName: '六合之家',
        houseFileTypeName: '原始框架cad',
        nt: '这hi是北京哦Joe就佛牌我今儿佛牌看外婆疯狂热哦'
    }
])
const tixianData = ref<any>([
])
const duiHuanData = ref<any>([])
const tixianTotal = ref(0)
const duiHuanTotal = ref(0)
// 收益
const params = reactive({
    current: 1,
    size: 10,
    startTime: '',
    endTime: ''
})
const tixianParams = reactive({
    current: 1,
    size: 10,
    startTime: '',
    endTime: ''
})
const duiHuanParams = reactive({
    current: 1,
    size: 10,
    startTime: '',
    endTime: ''
})

const mineInCome = ref({
    monthEarningsAmount: 0,
    surplusEarningsAmount: 0,
    totalEarningsAmount: 0,
    totalWithdrawAmount: 0,
    weekEarningsAmount: 0,
    yesterdayEarningsAmount: 0
})
const isShow = ref<Boolean>(false)
const isisShow = ref<Boolean>(false)
const duiHuanNum = ref<any>(null)
const getTiXianInfoFun = () => {
    getTiXianInfoApi(tixianParams).then((res: any) => {
        tixianData.value = res.data.records
        tixianTotal.value = res.data.total
    })
}
const getDuiHuanInfoFun = () => {
    getDuiHuanInfoApi(duiHuanParams).then((res: any) => {
        duiHuanData.value = res.data.records
        duiHuanTotal.value = res.data.total
    })
}



const tiXianFun = () => {
    isShow.value = true
}
const duiHuanFun = () => {

    if (duiHuanNum.value == null) {
        ElMessage.error('请输入兑换数量')
    } else {
        duiHuanBuBiApi({ amount: duiHuanNum.value }).then((res: any) => {
            ElMessage.success(res.message)
            getMineInCome()
            getShengYuMoneyFun()
            getDuiHuanInfoFun()
            isisShow.value = false
        })
    }
}
const tiXianBtn = () => {
    if (tixianMoney.value == null) {
        ElMessage.error('请输入提现金额')
    } else {
        tiXianBuBiApi({ amount: tixianMoney.value }).then((res: any) => {
            ElMessage.success(res.message)
            getMineInCome()
            getShengYuMoneyFun()
            getTiXianInfoFun()
            isShow.value = false
        })
    }
}
const quanbuTiXian = () => {
    if (shengyuMoney.value == 0) {
        isShow.value = false
        ElMessage.warning('暂无可提现金额')
        return
    }
    tixianMoney.value = shengyuMoney.value
}
const quanbuDuiHuan = () => {
    if (shengyuMoney.value == 0) {
        isisShow.value = false
        ElMessage.warning('暂无可兑换收益')
        return
    }
    duiHuanNum.value = shengyuMoney.value
}

const pickSel = (e: any) => {
    if (tabId.value == 1) {
        if (e == null) {
            params.startTime = ''
            params.endTime = ''
            getIncomeInfn()
        } else {
            params.startTime = formatDayTime(e[0])
            params.endTime = formatDayTime(e[1])
            getIncomeInfn()
        }
    } else if (tabId.value == 2) {
        if (e == null) {
            tixianParams.startTime = ''
            tixianParams.endTime = ''
            getTiXianInfoFun()
        } else {
            tixianParams.startTime = formatDayTime(e[0])
            tixianParams.endTime = formatDayTime(e[1])
            getTiXianInfoFun()
        }
    }

}
const getIncomeInfn = () => {
    getIncomeInfoApi(params).then((res: any) => {
        tableData.value = res.data.records
        total.value = res.data.total
    })
}
getIncomeInfn()
const getMineInCome = () => {
    getMineInComeApi().then((res: any) => {
        mineInCome.value = res.data
    })
}
getMineInCome()
const tabClick = (id: number) => {
    tabId.value = id
    pickTime.value = ''

    if (id == 1) {
        params.startTime = ''
        params.endTime = ''
        getIncomeInfn()
    } else if (id == 2) {
        tixianParams.startTime = ''
        tixianParams.endTime = ''
        getTiXianInfoFun()
    } else if (id == 3) {
        duiHuanParams.startTime = ''
        duiHuanParams.endTime = ''
        getDuiHuanInfoFun()
    }
}
const shengyuMoney = ref<number>(0)
const getShengYuMoneyFun = () => {
    getShengYuMoneyApi().then((res: any) => {
        shengyuMoney.value = res.data
    })
}
getShengYuMoneyFun()
</script>

<style scoped>
:deep(.is-active) {
    background-color: #FF9D07 !important;
}

:deep(.el-pagination__sizes) {
    display: none !important;
}

.shengyuSty {
    font-size: 15px;
}

.diaTitSty {
    position: relative;
    left: -10px;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}

.codeFooterSty {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}


.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, .3);
    z-index: 90;
}

.addSty {
    width: 120px;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    text-align: center;
    background: #E53236;
    color: #fff;
}

.footerBtn {
    width: 120px;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    text-align: center;
    background-color: rgb(223, 220, 220);
}

.qrcodeSty {
    position: fixed;
    top: 20%;
    left: 40%;
    width: 18%;
    height: 300px;
    background-color: #fff;
    opacity: 1;
    z-index: 99;
    padding: 20px;
}

.qrcodeSty2 {
    position: fixed;
    top: 20%;
    left: 40%;
    width: 18%;
    height: 390px;
    background-color: #fff;
    opacity: 1;
    z-index: 99;
    padding: 20px;
}

.tabSty {
    width: 96%;
    margin-left: 2%;
    margin-top: 20px;
}

.paginSty {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.profit_tab_box {}

.tab_item_sty {
    width: 120px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    margin: 0 20px;
    border-bottom: 3px solid #D8D8D8;
}

.profit_page {
    width: 80%;
}

.profit_main_box {
    position: relative;
    width: 100%;
    background-color: #fff;
    min-height: 500px;
    margin-top: 20px;
}

.progit_name_sty {
    font-size: 18px;
    color: #D8D8D8;
    margin-top: 20px;
}

.profit_item_sty {
    text-align: center;
    margin-top: 20px;
}

.detail_tit_sty {
    font-size: 18px;
    color: #D8D8D8;
    margin: 20px;
}

.profitBox {
    width: 100%;
}

.all_money_sty {
    width: 23%;
    height: 200px;
    text-align: center;
    background-color: #fff;
    font-size: 18px;
    color: #D8D8D8;
}

.profit_detail_sty {
    width: 76%;
    height: 200px;
    background-color: #fff;
}

.exchange_btn_sty {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #D8D8D8;
    color: #fff;
    margin-right: 20px;
    font-size: 16px;
    border-radius: 2px;
}

.withdrawal_btn_sty {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #E53236;
    color: #fff;
    font-size: 16px;
    border-radius: 2px;

}
</style>